import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {withRouter} from "react-router-dom";
import {Icon, SearchBar, Tabs, Tools} from "weaver-mobile";
import {ListViewPage, SearchAdvanced} from "weaver-mobile-page";
import {getUrlParams} from "../../util"

const getLabel = Tools.getLabel;

@inject("projectsStore")
@withRouter
@observer
export default class Projects extends Component {
    componentDidMount() {
        const {projectsStore: {init}} = this.props;
        const {tabs, fresh} = getUrlParams(this.props.location.search);
        init(Number(tabs), fresh);
    }

    openAdvancedForm = () => {
        const {history, projectsStore: {nowTab, searchAd, searchAd2}} = this.props;
        if (nowTab === 0) {
            history.push(searchAd.path);
        } else {
            history.push(searchAd2.path);
        }
    };

    render() {
        const tabs = [
            {
                title: getLabel("1211", "我的项目"),
                index: 0
            },
            {
                title: getLabel("83231", "我参与的"),
                index: 1
            }
        ];
        const checkOptions = [
            {
                title: getLabel("732", "未完成"),
                index: 0
            }, {
                title: getLabel("1232", "冻结"),
                index: 1
            }, {
                title: getLabel("555", "完成"),
                index: 2
            }
        ];

        const {
            history,
            projectsStore: {
                nowTab, listAd, listAdMine, searchValue, searchValue2, changeSearchValue, onSearchAdvancedChange,onReset,
                onTabChange, onSearch, chooseIndex, chooseIndex2, chooseState, searchAd, searchAd2, conditionReady,conditionReady2
            }
        } = this.props;
        const Elem = (
            <div className='proj-tool-box'>
                <div>
                    {checkOptions.map((opt, index) => {
                        return (<button key={index} onClick={() => chooseState(opt)}
                                        className={nowTab === 0 ?
                                            (opt.index === chooseIndex ? "proj-btn-checked" : "proj-btn-check")
                                            : (opt.index === chooseIndex2 ? "proj-btn-checked" : "proj-btn-check")
                                        }>
                            {opt.title}</button>)
                    })}
                </div>
            </div>
        );
        return (
            <div className="prj-content">
                <Tabs tabs={tabs}
                      prefixCls="top-tab"
                      initialPage={0}
                      swipeable={false}  //是否可以滑动内容切换
                      useOnPan={false}   //	使用跟手滚动
                      animated={true}   //是否开启切换动画
                      page={nowTab}
                      prerenderingSiblingsNumber={0}    //去除预加载造成的重复
                      onChange={(tab) => {
                          onTabChange(tab.index);
                          history.replace("/index/projects?tabs=" + tab.index);
                      }}
                />
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    value={nowTab === 0 ? searchValue : searchValue2}
                    onChange={(val) => changeSearchValue(val)}
                    onSubmit={() => onSearch()}
                    onClear={() => {
                        changeSearchValue();
                        onSearch();
                    }}
                    showExtraButton
                    extraButton={[
                        {
                            key: "advanced",
                            show: nowTab===0?(conditionReady ?
                                <Icon key="filter-o-hot" type="filter-o-hot" className={"advanced-ready"}/> :
                                <Icon key="filter-o" type="filter-o"/>)
                                :(conditionReady2 ?
                                    <Icon key="filter-o-hot" type="filter-o-hot" className={"advanced-ready"}/> :
                                    <Icon key="filter-o" type="filter-o"/>)
                        },
                    ]}
                    onExtraButtonClick={(key) => this.openAdvancedForm()}
                />
                <SearchAdvanced
                    store={nowTab === 0 ? searchAd : searchAd2}
                    onSubmit={() => onSearch()}
                    onChange={onSearchAdvancedChange}
                    onReset={onReset}
                />
                <div>
                    {Elem}
                </div>
                <div>
                    <ListViewPage.Normal
                        rowKey="id"
                        store={nowTab === 0 ? listAd : listAdMine}
                        heightSpace={window.getThemeVars ? window.getThemeVars()["tab-bar-height"] : 50}
                        getTemplate={this.getTemplate}
                        useBodyScroll={false}
                        getRowProps={this.getRowProps}
                        withSwipeAction={false}
                        swipeActionProps={{}}
                        onRowClick={(item) => {
                            history.replace("/index/projects?tabs=" + nowTab + "&fresh=no");
                            history.push(`/ProjectDetails/0/${item.id}`)
                        }}
                    />
                </div>
            </div>
        );
    }

    getTemplate = () => {
        const {projectsStore: {nowTab}} = this.props;
        return {
            default: [{
                key: "col_1",
                render: (data) => {
                    const {namespan, managerspan, begindatespan, enddatespan, statusname, statusnamespan, procode, prjtypespan} = data;
                    return (
                        <div className="template-list-wrapper">
                            <div className="t-p-head">
                                <h4 className="t-p-title">{namespan}</h4>
                                <div className={`t-p-state t-p-state-${statusname}`}>{statusnamespan}</div>
                            </div>
                            <div className="t-p-content">
                                {nowTab === 1 ?
                                    <div className="t-p-item">
                                        <span className="t-p-text">{getLabel("16573", "项目经理") + "："}{managerspan}</span>
                                    </div> : null
                                }
                                <div className="t-p-item">
                                    <span className="t-p-text">{getLabel("17852", "项目编码") + "："}{procode}</span>
                                </div>
                                <div className="t-p-item">
                                    <span className="t-p-text">{getLabel("586", "项目类型") + "："}{prjtypespan}</span>
                                </div>
                                <div className="t-p-item">
                                    <span
                                        className="t-p-text">{getLabel("500805", "计划开始") + "/" + getLabel("24980", "结束日期") + "："}{begindatespan}
                                        {begindatespan && enddatespan ? <span>/</span> : ""}
                                        {enddatespan}</span>
                                </div>
                            </div>
                        </div>

                    );
                },
            }],
        };
    }
}
